<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <p>count:{{count}}</p>
        <button @click="increase">increase</button>
    </div>
</body>
<script>
    // import { reactive, effect} from '../node_modules/vue/dist/vue.esm-browser.js'
    // import {
    //     reactive,
    //     effect
    // } from '../node_modules/@vue/reactivity/dist/reactivity.esm-browser.js'
    // let total
    // let product = reactive({
    //     name: 'zhangsan',
    //     price: 100,
    //     count: 2
    // })

    // effect(() => {
    //     total = product.price * product.count
    // })
    // console.log(total)
    // product.count = 100
    // console.log(total)
    // product.price = 150
    // console.log(total)
    // product.count = 1
    // console.log(total)



    // let arr = [1, 1, 2, 3, 1, 2]
    // let s = new Set(arr)
    // console.log([...s]) //[1,2,3]

    // s.add(4)
    // console.log(s)//Set(3) {1, 2, 3, 4}

    // let m = new Map()
    // let a = {}
    // let b = {}
    // m.set(a, 'a100')
    // m.set(b, 'b100')
    // console.log(m)//Map(2) {{…} => "a100", {…} => "b100"}


    // let e1 = document.getElementById('foo');
    // let e2 = document.getElementById('bar');
    // const arr = [
    //     [e1, 'foo 元素'],
    //     [e2, 'bar 元素'],
    // ];
    // // e1=null
    // // e2=null
    // arr[0] = null;
    // arr[1] = null;
    // console.log(arr, e1, e2)

    const wm = new WeakMap();
    let key = {};
    let obj = {
        foo: 1
    };

    wm.set(key, obj);
    key = null
    // obj = null;
    // console.log(wm)
    // wm.get(key)
   
    console.log(wm)

</script>

</html>